<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script>
            
            var fRoom={
                NONE:0,
                START:1,
                END:2
            }
            
                    
            var FPS=60;
            var MX,MY;
            var MD=false;
            var MDX,MDY;
            
            
            var playerStart={
                x:0,
                y:0
            }
            
            //images
            var imgFloor = new Image();    
            imgFloor.src='img/floor.png';
            
            var imgPlayer = new Image();    
            imgPlayer.src='img/player.png';
            
            
            var MAP=new Array(200);
            for (var i=0;i<200;i++){
                MAP[i]=new Array(200);
            }
            
            var TILE_MAP=new Array(200);
            for (var i=0;i<200;i++){
                TILE_MAP[i]=new Array(200);
            }
            
            var mobList=[];
            var roomList=[];
            
            
            
            var Key = {
                _pressed: {},

                LEFT: 37,
                UP: 38,
                RIGHT: 39,
                DOWN: 40,
                CTRL: 17,
                SHIFT: 16,


                isDown: function (keyCode) {
                    return this._pressed[keyCode];
                },

                onKeydown: function (event) {
                    this._pressed[event.keyCode] = true;
                },

                onKeyup: function (event) {
                    delete this._pressed[event.keyCode];
                }
            };
            
            
            var player={
                
                x: 0,
                y: 0,
                oldx:0,
                oldy:0,
                width:32,
                height:32,
                agility:4,
                colAngle:0,
                rotation:0,
                cam: {
                    x:0,
                    y:0
                },
                                      
                
                update: function(){
                    
                    this.cam.x=this.x-400;
                    this.cam.y=this.y-300;
                    
                    this.oldx=this.x;
                    this.oldy=this.y;
                                        
                    
                    if (Key.isDown(Key.UP))  {
                        this.y -= this.agility;
                        this.rotation=270;
                    }
                    if (Key.isDown(Key.DOWN)) {
                        this.y += this.agility;
                        this.rotation=90;
                    }
                    if (Key.isDown(Key.LEFT)) {
                        this.x -= this.agility;
                        this.rotation=180;
                    }
                    if (Key.isDown(Key.RIGHT)) {
                        this.x += this.agility;
                        this.rotation=0;
                    }
                    
                    if (Key.isDown(Key.RIGHT) && Key.isDown(Key.UP)) this.rotation=315;
                    if (Key.isDown(Key.LEFT) && Key.isDown(Key.UP)) this.rotation=225;
                    if (Key.isDown(Key.LEFT) && Key.isDown(Key.DOWN)) this.rotation=135;
                    if (Key.isDown(Key.RIGHT) && Key.isDown(Key.DOWN)) this.rotation=45;
                    
                    if (Key.isDown(Key.CTRL)) this.attack();
                    
                                               
                    this.x=Math.floor(this.x);
                    this.y=Math.floor(this.y);
                    
                    
                    //MAP 
                    var px=Math.floor(this.x/32);
                    var py=Math.floor(this.y/32);
                            
                    for (var x=0; x<2;x++){
                        for (var y=0; y<2;y++){
                            
                            if (MAP[px-x][py-y]==1) {
                               
                                this.x=this.oldx;
                                this.y=this.oldy;
                            }
                        }
                    }
        
                            
                     
                },
                
                attack:function(){
                    
                    for (var id in mobList){
                        
                        var blub=ypoth(mobList[id].x-this.x, mobList[id].y-this.y)
                        
                        if (blub<32){
                            
                            mobList[id].health=-1;
                            
                        }
                        
                    }
                 
                },
                
                draw : function(offsetx,offsety){
                    ctx.save();
                    ctx.fillStyle="#000";
                    ctx.translate((this.x-this.width/2)-offsetx,(this.y-this.height/2)-offsety);
                    ctx.rotate(this.rotation * Math.PI / 180);
                    ctx.drawImage(imgPlayer, -this.width/2, -this.height/2, 32, 32)
                    
                    // ctx.fillRect(0,0,this.width,this.height);
                    ctx.restore();
                }
            };
            
            function mob(x,y){
                this.x=x;
                this.y=y;
                this.width=16;
                this.health=100;
                this.active=true;
                
                
                this.update= function() {
                    
                    if (this.health<=0) this.active=false;
                    
                }
                
                this.draw=function(offsetx,offsety) {
                    ctx.save();
                    ctx.fillStyle="#F00";
                    ctx.translate(this.x-offsetx, this.y-offsety);
                    ctx.beginPath();
                    ctx.arc(0, 0, this.width, 0, Math.PI*2, false);
                    ctx.closePath();
                    ctx.fill();
                    ctx.restore();
                }
            }
            
                 
            //ROOM CLASS
            function room(I) {
                                       
                return I;
            }
            
                       
            //input
            function MouseMove(event){
                
                MX=event.x ;
                MY=event.y ;
                
                var lcanvas = document.getElementById("main");

                MX -= lcanvas.offsetLeft;
                MY -= lcanvas.offsetTop;
                
                MX +=player.cam.x;
                MY +=player.cam.y;
       
            }
            
            function MouseDown(event){
              
                MD=true;
                MDX=event.x;
                MDY=event.y;
                        
            }
            
            
            function MouseUp(event){
                
                MD=false;
                
            }
            
                   
            
            //input
            window.addEventListener('keyup', function (event) { Key.onKeyup(event); }, false);
            window.addEventListener('keydown', function (event) { Key.onKeydown(event); }, false);
            window.addEventListener('mousemove', MouseMove, false);
            window.addEventListener('mousedown', MouseDown, false);
            window.addEventListener('mouseup', MouseUp, false);
            
            
            //MAP generation
            
            function generateMap(minroomw,minroomh,roomw,roomh,roomcount){
                
                
                ctxmini = document.getElementById('minimap').getContext('2d');
                
                
                var ROOM_INDEX=0;
                                               
                for (var xx=0;xx<200;xx++){
                    for (var yy=0;yy<200;yy++){
                            
                        MAP[xx][yy]=1;
                                             
                    }
                }
                
                                          
                var done=false;
                
                while (!done){
                    
                    var rndx=Math.floor(((Math.random() * ((190-roomw) - 10)) + 10));
                    var rndy=Math.floor(((Math.random() * ((190-roomw) - 10)) + 10));
                    var width=Math.floor(((Math.random() * (roomw - minroomw)) + minroomw)); 
                    var height=Math.floor(((Math.random() * (roomh - minroomh)) + minroomh));
                    
                    roomList.push(room({
                        x: rndx,
                        y: rndy,
                        x2: rndx+width,
                        y2: rndy+height,
                        w: width,
                        h: height,
                        xc: rndint(rndx,rndx+width),
                        yc: rndint(rndy,rndy+height),
                        active: true,
                        flag:fRoom.NONE

                    }));
                    
                  
                    var lastRoom=roomList[roomList.length-1];
                    
                    if (roomList.length==1){
                        playerStart.x=rndint((lastRoom.x+2)*32,(lastRoom.x2-2)*32);
                        playerStart.y=rndint((lastRoom.y+2)*32,(lastRoom.y2-2)*32);
                        lastRoom.flag=fRoom.START;
                    }
                    
                                       
                    for (var id in roomList){
                        
                        if (RoomCollision(lastRoom, roomList[id])){
                            
                            lastRoom.active=false;
                                                                        
                        }
                    }
                    
                    roomList = roomList.filter(function (room) {
                        return room.active;
                    });
                    
                    
                    if (roomList.length>roomcount) done=true;
                 
                    
                } //WHILE
                
                
                
                //CARVE TUNNEL
                for (var id in roomList){
                      
                    if (id>0){
                        
                        if (rndint(0,10)>5){
                            
                            createHtunnel(roomList[id-1].xc, roomList[id].xc, roomList[id-1].yc);
                            createVtunnel(roomList[id-1].yc, roomList[id].yc, roomList[id].xc);
                            
                        }else{
                                   
                            createVtunnel(roomList[id-1].yc, roomList[id].yc, roomList[id-1].xc);
                            createHtunnel(roomList[id-1].xc, roomList[id].xc, roomList[id].yc);
                        }
                    }
                }
                
                  
                //CARVE ROOMS          
                roomList.forEach(function (room) {
                    for (var x=0;x<room.w;x++){
                        for (var y=0;y<room.h;y++){
                        
                            var x2=x+room.x;
                            var y2=y+room.y;
                        
                            if (x2<200 && y2<200){
                                MAP[x2][y2]=0;
                               
                            }
                        
                        
                        }
                    }

                });
                
                   
                //TILE MAP
                for (var xx=0;xx<200;xx++){
                   
                    for (var yy=0;yy<200;yy++){
                        
                        if (MAP[xx][yy]==0){
                            TILE_MAP[xx][yy]=rndint(1,16);
                        }
                        
                    }
                }
                        
                   
                
                
                 
                //MINIMAP                                
                for (var xx=0;xx<200;xx++){
                    for (var yy=0;yy<200;yy++){
                        
                   
                                        
                        if (MAP[xx][yy]==0){
                                            
                            ctxmini.fillStyle="#0F0";
                            ctxmini.fillRect(xx, yy, 1, 1);
                                            
                        }
                                    
                        if (MAP[xx][yy]==1){
                                            
                            ctxmini.fillStyle="#000";
                            ctxmini.fillRect(xx, yy, 1, 1);
                                            
                        }
                                     
                    }
                }
                
                //FILL MOBS
                fillmap();
                
                
                
            }                       
            //FUNCTION
            function rndint(min,max){
                return Math.floor(((Math.random() * (max - min)) + min));
            }
            
            function RoomCollision(room1,room2){
            
                if (room1 != room2){
            
                    if (room1.x <room2.x2  && room1.x2 >room2.x && room1.y <room2.y2 && room1.y2 > room2.y){
                        return true;
                    }
                } 
                
                return false;
            }
             
            function createHtunnel(x1,x2,y){
            
                if (x1-x2<0){
                    for (x1;x1<=x2;x1++){
                        for (var yy=0;yy<3;yy++){
                            MAP[x1][y+yy]=0;
                        }
                 
                    }
                }else{
                    for (x1;x1>=x2;x1--){
                        for (var yy=0;yy<3;yy++){
                            MAP[x1][y+yy]=0;
                        }
                 
                    }
                }
            }
            
            function createVtunnel(y1,y2,x){
                
                if (y1-y2<0){
                    for (y1;y1<=y2;y1++){
                 
                        for (var xx=0;xx<3;xx++){
                            MAP[x+xx][y1]=0;
                        }
                 
                    }
                }else{
                    for (y1;y1>=y2;y1--){
                        for (var xx=0;xx<3;xx++){
                            MAP[x+xx][y1]=0;
                        }
                    }
                }
            }
            
            
            
            
            
            //ITAMZ
            function fillmap(){
                               
                roomList.forEach(function (room) {
                    
                    if(room.flag!=fRoom.START){
                        PLACE_MOBS(room);
                    }
         

                });
                           
            }
            
            function PLACE_MOBS(room){
                
                for (var i=0;i<10;i++){
                    x=rndint(room.x+2, room.x2-2);
                    y=rndint(room.y+2, room.y2-2);
                    
                    var m = new mob(x*32, y*32);
                    mobList.push(m);
                                
                    
                }
                
            }
             
          
          
            //
            function recsOverlap(x1,y1,w1,h1,x2,y2,w2,h2){
              
                if (x1+w1 < x2  && x1 > x2+w2 && y1+h1 < y2 && y1 > y2+h2) return true;
                
                return false;
            }
            
            function ypoth(a,b){
                return Math.sqrt((a*a)+(b*b));
            }
                 
                 
                 
            //INIT     
            
            function init(){
                
                
                generateMap(10, 10, 25, 25, 8);
                
   
                player.x=playerStart.x
                player.y=playerStart.y;
                
                setInterval(update, 1000/FPS)
            }
            
            
            
            function update (){
                
                
                
                mobList.forEach(function (mob) {
                    mob.update();

                    mobList = mobList.filter(function (mob) {
                        return mob.active;
                    });
                });
                
                
                player.update();
                
         
                
                draw();
                
            }
            
            function draw(){
                
                ctx = document.getElementById('main').getContext('2d');
               
                
                ctx.fillStyle="#FFF";
                ctx.fillRect(0, 0, 800, 600);
                
                
                ctx.save();
                
                var x32=Math.floor(player.cam.x/32);
                var y32=Math.floor(player.cam.y/32);
                                
                for (var xx=x32;xx<x32+26;xx++){
                    for (var yy=y32;yy<y32+20;yy++){
                        
                        if(xx>0 && xx<199 && yy>0 && yy <199){
                                        
                            if (MAP[xx][yy]==0){
                                            
                                ctx.fillStyle="#FFF";
                                //ctx.fillRect((xx*32)-player.cam.x, (yy*32)-player.cam.y, 32, 32);
                                //ctx.drawImage(imgFloor, (xx*32)-player.cam.x, (yy*32)-player.cam.y, 32, 32)
                                
                                var tile=TILE_MAP[xx][yy];
                                
                                
                                
                                ctx.drawImage(imgFloor, tile*80, 0, 80, 80, (xx*32)-player.cam.x, (yy*32)-player.cam.y, 32, 32);
                                            
                            }
                                    
                            if (MAP[xx][yy]==1){
                                            
                                ctx.fillStyle="#000";
                                ctx.fillRect((xx*32)-player.cam.x, (yy*32)-player.cam.y, 32, 32);
                                            
                            }
                        }                 
                                        
                    }
                }
                ctx.restore();
                                
                
                ctx.strokeStyle="#000";
                ctx.beginPath();
                ctx.arc(MX, MY, 8, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.stroke();
                
                
                 
                
                player.draw(player.cam.x,player.cam.y);
                
                                
                mobList.forEach(function (mob) {
                    mob.draw(player.cam.x,player.cam.y);

                });
                
                            
            }
            
            
            
            
            
            /*    if (MD) {
                        
                        var dx = this.x - MX;
                        var dy = this.y - MY;
                        this.colAngle = Math.atan2(dy, dx);
                    
                        this.colAngle= this.colAngle*180/Math.PI;
                    
                        if(this.colAngle<0) this.colAngle+=360;
                  
                        this.colAngle = this.colAngle-180;
                    
                        this.rotation=this.colAngle;
                    
                                            
                        var deadzone=Math.sqrt((this.x-MX)*(this.x-MX)+(this.y-MY)*(this.y-MY))
                        
                        if (deadzone>16){
                            this.x += Math.cos(this.rotation * Math.PI / 180) * this.agility;
                            this.y += Math.sin(this.rotation * Math.PI / 180) * this.agility;
                        }
                        
                        mobList.forEach(function (mob) {
                            
                                                        
                            if (Math.sqrt((MDX-mob.x)*(MDX-mob.x)+(MDY-mob.Y)*(MDY-mob.y))){
                                
                                this.attack();
                                
                            }

                        });
             
                    }*/
            
            
            
        </script>
    </head>
    <body onload="init()">

        <canvas id="main" width="800" height="600"></canvas>
        <canvas id="minimap" width="200" height="200"></canvas>

        <?php
        // put your code here
        ?>
    </body>
</html>
